<template>
	<view>

		<button class="brutalist-button">
			<div class="ms-logo">
				<div class="ms-logo-square"></div>
				<div class="ms-logo-square"></div>
				<div class="ms-logo-square"></div>
				<div class="ms-logo-square"></div>
			</div>
			<div class="button-text">
				<span>Get it from</span>
				<span>Microsoft</span>
			</div>
		</button>

	</view>
</template>

<script>
	export default {
		name: "button8",
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	/* From Uiverse.io by 0xnihilism */
	.brutalist-button {
		display: flex;
		align-items: center;
		cursor: pointer;
		width: 169px;
		height: 60px;
		background-color: #000;
		color: #fff;
		text-decoration: none;
		font-family: Arial, sans-serif;
		font-weight: bold;
		border: 3px solid #fff;
		outline: 3px solid #000;
		box-shadow: 6px 6px 0 #00a4ef;
		transition: all 0.1s ease-out;
		padding: 0 15px;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
	}

	.brutalist-button::before {
		content: "";
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg,
				transparent,
				rgba(255, 255, 255, 0.8),
				transparent);
		z-index: 1;
		transition: none;
		/* Initially hide the pseudo-element */
		opacity: 0;
	}

	@keyframes slide {
		0% {
			left: -100%;
		}

		100% {
			left: 100%;
		}
	}

	.brutalist-button:hover::before {
		/* Show the pseudo-element on hover */
		opacity: 1;
		animation: slide 2s infinite;
	}

	.brutalist-button:hover {
		transform: translate(-4px, -4px);
		box-shadow: 10px 10px 0 #000;
		background-color: #000;
		color: #fff;
	}

	@keyframes slide {
		0% {
			left: -100%;
		}

		100% {
			left: 100%;
		}
	}

	.brutalist-button:active {
		transform: translate(4px, 4px);
		box-shadow: 0px 0px 0 #00a4ef;
		background-color: #fff;
		color: #000;
		border-color: #000;
	}

	/* Rest of the CSS remains the same */

	.ms-logo {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1px;
		width: 26px;
		height: 26px;
		margin-right: 8px;
		flex-shrink: 0;
		transition: transform 0.2s ease-out;
		position: relative;
		z-index: 1;
	}

	.brutalist-button:hover .ms-logo {
		transform: rotate(-10deg) scale(1.1);
	}

	.brutalist-button:active .ms-logo {
		transform: rotate(10deg) scale(0.9);
	}

	.ms-logo-square {
		width: 100%;
		height: 100%;
	}

	.ms-logo-square:nth-child(1) {
		background-color: #f25022;
	}

	.ms-logo-square:nth-child(2) {
		background-color: #7fba00;
	}

	.ms-logo-square:nth-child(3) {
		background-color: #00a4ef;
	}

	.ms-logo-square:nth-child(4) {
		background-color: #ffb900;
	}

	.button-text {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
		transition: transform 0.2s ease-out;
		position: relative;
		z-index: 1;
	}

	.brutalist-button:hover .button-text {
		transform: skew(-5deg);
	}

	.brutalist-button:active .button-text {
		transform: skew(5deg);
	}

	.button-text span:first-child {
		font-size: 11px;
		text-transform: uppercase;
	}

	.button-text span:last-child {
		font-size: 16px;
		text-transform: uppercase;
	}
</style>